<template>
  <div class="messageConfig h100">
    <div class="table-list">
      <div class="table-container">
        <list-table-new ref="klTable" v-bind="tableSetting"></list-table-new>
      </div>
    </div>
  </div>
</template>

<script>
import {
  queryMessageList,
  insertOrUpdateMessage
} from "@/api/common.js"
export default {
  data(){
    return {
      tableSetting: {
        radioShow: false,
        showCustomBtn: false, //显示自定义列按钮
        showFilterBtn: false, //显示过滤器按钮
        pageConfig: {
          pageCode: "messageConfig",
          userId: this.$store.getters.userInfo.id,
        },
        searchObj: {
          searchMethod: (params, sortStr) => {
            this.getTableData(params,sortStr);
          },
          queryData: {
            page: 1,
            pageSize: 15
          },
          searchArr: [
            {
              type: "input",
              label: "主题名称",
              model: "topicName"
            },
            {
              type: "input",
              label: "主题编码",
              model: "topicCode"
            },
          ],
        },
        actionList: [
          {
            name: "新建",
            icon: "el-icon-plus",
            // 点击调用的方法
            method: obj => {
              this.gotoDetails(obj, "messageConfigDetails", "add");
            }
          },
        ],
        column: [
          {
            label: "主题名称",
            prop: "topicName",
            sortable: "custom"
          },
          {
            label: "主题编码",
            prop: "topicCode",
            sortable: "custom"
          },
          {
            label: "创建人",
            prop: "createByName",
            sortable: "custom"
          },
          {
            label: "创建时间",
            prop: "createTime",
            sortable: "custom"
          },
        ],
        // 表格数据
        tableData: [],
        //表格方法
        tableMethods: {
          //点击行的方法
          rowClick: row => {
            this.gotoDetails(row, "messageConfigDetails", "edit");
          }
        }
      }
    }
  },
  created(){
    /* 添加监听事件 */
    window.addEventListener("storage", this.updateData);
    
  },
  beforeDestroy() {
    /* 删除监听事件 */
    window.removeEventListener("storage", this.updateData);
  },
  mounted(){
    this.init();
  },
  methods: {
    init(){
      this.$refs.klTable.getTableConfig();
      // setTimeout(() => {
      //   this.updateData();
      // }, 1000);
    },
    updateData() {
      this.$refs.klTable.searchData();
    },
     getTableData(params,sortStr){
      let form = { ...params };
      if (sortStr) {
        form.orders = sortStr;
      }
      // 调用接口请求数据
      queryMessageList(form)
        .then(res => {
          let data = res.data.list || [];
          let total = res.data.total || 0;
          this.$set(this.tableSetting, "tableData", data);
          this.$set(this.tableSetting, "totalNumber", total);
        })
        .catch(e => {
          this.$set(this.tableSetting, "tableData", []);
          this.$set(this.tableSetting, "totalNumber", 0);
        });
    },
    gotoDetails(row, router, type) {
      let form = {
        pageType: type,
      };
      if (type != "add") {
        form.id = row.id;
      }
      const { href } = this.$router.resolve({
        name: router,
        query: form
      });
      window.open(href, "_blank");
    },
  }
}
</script>

<style lang="less" scoped>
  .messageConfig{
    width: 100%;
    height: 100%;
    background-color: white;
    .table-list {
      height: calc(100% - 10px);
      width: 100%;
      padding: 20px;
      .table-container {
        width: 100%;
        height: calc(100% - 10px); 
      }
    }
  }
</style>